import { useState, useEffect } from 'react'
import {
  Table,
  Divider,
  Popconfirm,
  Drawer,
  Button
} from 'antd';
import { getAll, delFn } from "./api"
import './App.css'
function App() {
  const [dataSource, setDataSource] = useState([])
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "性别",
      dataIndex: "sex",
      key: "sex",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "分数",
      dataIndex: "score",
      key: "score",
    },
    {
      title: "操作",
      key: "operations",
      render: (text, record) => (
        <span>
          <Popconfirm
            title="是否删除？"
            okText="确定"
            cancelText="取消"
            onConfirm={() => del(record.id)}
          >
            <a href="#">删除</a>
          </Popconfirm>
          <Divider type="vertical" />
          <a>编辑</a>
        </span>
      ),
    },
  ]
  async function getList() {
    await getAll().then((res) => {
      return setDataSource(res.data)
    })
  }
  useEffect(() => {
    getList()
  }, [])
  async function del(id) {
    await delFn(id)
    getList()
  }
  function showDrawer() {

  }
  function onClose() {

  }
  return (
    <div>
      {/* 表格盒子 */}
      <div>
        <Table dataSource={dataSource} columns={columns} key="id" />
      </div>
      {/* 弹出层 */}
      <div>
        <Button type="primary" onClick={showDrawer}>
          Open
        </Button>
        <Drawer
          title="Basic Drawer"
          placement="right"
          closable={false}
          onClose={onClose}
        // visible={this.state.visible}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Drawer>
      </div>
    </div>
  )
}

export default App
